<template>
  <div class="container">
    <goodscomments></goodscomments>
    <div class="footer-nav-before"></div>
    <div class="footer-nav flex">
        <div class="flex-con flex">
            <div class="flex-con">
                <img src="../../assets/icons/goods/earsblue@2x.png" alt="" class="ears-icon">
                <div class="text-center">客服</div>                
            </div>
            <div class="flex-con">
                <img src="../../assets/icons/goods/cart-icon@2x.png" alt="" class="cart-icon">
                <div class="text-center">购物车</div>                
            </div>
        </div>
        <template v-if="!isForGroup">
            <div class="footer-nav-btn add2cart-btn" @click="showRuleDialog">
              加入购物车
          </div>
          <div class="footer-nav-btn footer-nav-buy-btn" @click="showRuleDialogNow">
              立即购买
          </div>
        </template>
        <template v-else>
          <div class="gray-seprator"></div>
          <div class="buyrowbtn flex flex-vertical">
            <div class="origin-price">¥800</div>
            <div class="btn-txt">立即购买</div>
          </div>
          <div class="groupbtn flex flex-vertical">
              <div class="origin-price">¥800</div>
              <div class="btn-txt">立即团购</div>
          </div>
        </template>
    </div>
    <div class="rule-masker" v-show="isRuleDialogShowed" @click="closeRuleDialog">

        <div class="rule-dialog" @click.stop="noop">
            <div class="dialog-inner">
                <div class="border-b rule-title">
                    <div class="flex">
                        <img src="../../assets/imgs/goods1@2x.png" alt="" class="rule-goods-img">
                        <div class="flex-con">
                            <div class="rule-goods-title">
                                零度行车记录仪
                            </div>
                            <div class="rule-goods-points">
                                <span class="goods-points">
                                    750积分
                                </span>
                                <span class="goods-money">
                                    +288元
                                </span>       
                            </div>
                        </div>
                        <div>
                            <img src="../../assets/icons/goods/closebtn2@2x.png" alt="" class="closebtn-icon">
                        </div>
                    </div>
                </div>
                <div class="rule-desc border-b">
                    规格：
                    <div class="tags clearfix">
                        <div class="tag tag-selected">25*25cm</div>
                        <div class="tag">25*25cm</div>
                    </div>
                </div>
                <div class="rule-num">
                    <div class="flex">
                        <div class="flex-con">
                            购买数量：        
                            <div class="rule-num-left rule-num-content">
                                剩余200
                            </div>
                        </div>
                        <div class="text-right">
                             <div class="reducenum-btn">-</div>
                                <input type="number" class="goods-num" :value="item.num">
                                <div class="addnum-btn">+</div>
                        </div>
                    </div>
                                        
                </div>
            </div>
            <div class="btn-areas flex" v-if="isAdd2Cart">
                <div class="add2cartbtn flex-con">
                    加入购物车
                </div>
                <div class="buynowbtn flex-con">
                    立即购买
                </div>
            </div>
            <div class="btn-areas flex" v-else>                
                <div class="buynowbtn flex-con">
                    下一步
                </div>
            </div>
        </div>
    </div>    
  </div>
</template>
<script>
import goodscomments from '../../components/goodscomments'
export default {
  components:{
    goodscomments
  },
  data() {
    return {
      isAdd2Cart: true,
      isRuleDialogShowed: false,
      isForGroup:0,
      banners: [],
      item: {
        num: 1
      }
    };
  },
  methods: {
    closeRuleDialog() {
      this.isRuleDialogShowed = false;
    },
    noop() {},
    showRuleDialog() {
      this.isRuleDialogShowed = true;
      this.isAdd2Cart = true;
    },
    showRuleDialogNow() {
      this.isRuleDialogShowed = true;
      this.isAdd2Cart = false;
    }
  },
  created() {
    this.isForGroup = this.$route.query.isgroup || 0;
    this.banners = [
      {
        img_src: "",
        link: ""
      }
    ];
  }
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 6.56rem;
  .banners {
    height: 6.56rem;
    img {
      height: 6.56rem;
    }
  }
}
.goods-title {
  font-size: 0.4rem;
  color: #17402a;
  padding-bottom: 0.2533rem;
}
.goods-desc {
  font-size: 0.3733rem;
  .goods-points {
    color: #ff2a2a;
  }
  .goods-money {
    color: #005a1a;
  }
}
.com-avatar {
  width: 1.1067rem;
  height: 1.1067rem;
  margin-right: 0.2533rem;
}
.com-name {
  padding-bottom: 0.1867rem;
}
.company-auth-icon {
  width: 0.28rem;
  height: 0.3867rem;
  margin-right: 0.16rem;
}
.safeback-icon {
  margin-right: 0.16rem;
  width: 0.32rem;
  margin-left: 0.5467rem;
  height: 0.3733rem;
}
.goods-content {
  img {
    width: 100%;
  }
}
.tab-nav {
  text-align: center;
  color: #17402a;
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;

  justify-content: space-around;
  font-size: 0.4rem;
  & > div {
    padding: 0.2267rem 0;
  }
  .tab-nav-selected {
    color: #ff2a2a;
    position: relative;
    &:after {
      position: absolute;
      display: block;
      content: " ";
      left: 0;
      right: 0;
      bottom: 0;
      height: 0.0533rem;
      background-color: #ff2a2a;
    }
  }
}
.footer-nav-before {
  height: 1.24rem;
}
.ears-icon {
  width: 0.52rem;
  height: 0.5067rem;
  margin-bottom: 0.0933rem;
}
.footer-nav {
  height: 1.24rem;
  position: fixed;
  font-size: 0.24rem;
  text-align: center;
  color: #666;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #efefef;
}
.cart-icon {
  width: 0.4933rem;
  height: 0.48rem;
  margin-bottom: 0.12rem;
}
.footer-nav-btn {
  width: 3.4267rem;
  background-color: #ff6a0f;
  text-align: center;
  color: white;
  height: 1.24rem;
  line-height: 1.24rem;
  font-size: 0.4rem;
}
.footer-nav-buy-btn {
  color: white;
  width: 3.0667rem;
  text-align: center;
  background-color: #e82f24;
}
.rule-masker {
  background-color: rgba(0, 0, 0, 0.36);
  z-index: 100;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.rule-dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0.3467rem;
  background-color: #fff;
  .closebtn-icon {
    width: 0.5333rem;
    height: 0.5333rem;
    position: relative;
    top: -0.4rem;
  }
  .dialog-inner {
    padding: 0.32rem 0.4rem;
  }
  .rule-goods-img {
    width: 1.3333rem;
    height: 1.3333rem;
    margin-right: 0.4933rem;
  }
  .rule-goods-title {
    font-size: 0.3733rem;
    color: #17402a;
    padding-bottom: 0.28rem;
  }
  .rule-goods-points {
    font-size: 0.3733rem;
  }
  .goods-points {
    color: #ff2a2a;
  }
  .goods-money {
    color: #005a1a;
  }
  .rule-title {
    padding-bottom: 0.32rem;
  }
  .rule-desc {
    font-size: 0.3733rem;
    color: #333;
    padding: 0.32rem 0;
  }
  .rule-num {
    padding: 0.4533rem 0 0.5733rem 0;
    font-size: 0.3733rem;
    color: #333;
  }
  .rule-num-left {
    font-size: 0.32rem;
    color: #999999;
  }
  .tags {
    margin-top: 0.32rem;
    margin-right: -0.36rem;

    .tag {
      margin-right: 0.36rem;
      float: left;
      padding: 0 0.3467rem;
      height: 0.8533rem;
      line-height: 0.8533rem;
      border-radius: 0.12rem;
      border: solid 1px rgba(163, 163, 163, 0.58);
    }
    .tag-selected {
      color: #f08c37;
      border: solid 1px #f08c37;
    }
  }
}

.btn-areas {
  font-size: 0.4267rem;
  color: #fff;
  text-align: center;
  height: 1.1467rem;
  & > div {
    height: 1.1467rem;
    line-height: 1.1467rem;
  }
  .add2cartbtn {
    background-color: #ff690e;
  }
  .buynowbtn {
    background-color: #ff2a2a;
  }
}
.reducenum-btn,
.goods-num,
.addnum-btn {
  float: left;
}
.goods-num {
  width: 0.76rem;
  text-align: center;
  font-size: 0.3733rem;
  padding: 0;
  border: none;
  margin: 0;
  display: inline-block;
  height: auto;
}
.reducenum-btn,
.addnum-btn {
  text-align: center;
  width: 0.4667rem;
  color: white;
  font-size: 0.49rem;
  height: 0.4667rem;
  border-radius: 0.08rem;
}
.reducenum-btn {
  background-color: rgba(52, 163, 89, 0.5);
}
.addnum-btn {
  background-color: #34a359;
}
.rule-num-content {
  padding-top: 0.32rem;
}
.gray-seprator{
  	width: 0.0533rem;
	height: 0.7467rem;
	background-color: rgba(51, 51, 51, 0.41);
}
.buyrowbtn{
    width: 2.96rem;
    height: 1.24rem;
    justify-content: space-around;
    text-align:center;
    padding:0.1rem 0;
    box-sizing: border-box;
}
.origin-price{
  	font-size: 0.32rem;
	color: #ff8a00;
}
.btn-txt{
  	font-size: 0.32rem;
	color: #ff8a00;

}
.groupbtn{
  padding:0.1rem 0;
    box-sizing: border-box;
  text-align:center;
    background-color: #e82f24;
    justify-content: space-around;
	width: 3.0267rem;
	height: 1.24rem;
  .origin-price,.btn-txt{
    	color: #ffffff;
  }
}
</style>
